<!DOCTYPE html>
<html>

<head>
    <title>个人介绍|Andy1999</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="normlize css/normlize.css">
    <link rel="stylesheet" type="text/css" href="font-awesome-4.4.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <!---***********************loading************** -->
    <!-- <div class="se-pre-con"></div> -->
    <!-- *********************mask******************** -->
    <div id="mask-nav">
        <ul>
            <a href="#">
                <li>
                    <h1>首页</h1></li>
            </a>
            <a href="#recommend">
                <li>
                    <h1>项目</h1></li>
            </a>
            <a href="#foot">
                <li>
                    <h1>联系我</h1></li>
            </a>
        </ul>
    </div>
    <header>
        <video id="my-video" class="video" autoplay muted loop>
            <source src="http://callmenick.com/_development/video/full-screen-background-video/media/demo.mp4" type="video/mp4">
            <source src="media/demo.ogv" type="video/ogg">
            <source src="media/demo.webm" type="video/webm"> Your browser doesn't support HTML5 video. Here's a <a href="#">link</a> to download the video.
        </video>
        <!--nav-->
        <nav id="nav">
            <ul class="nav-list">
                <li class="logo">
                    <h1>Andy1999</h1></li>
                <a href="#">
                    <li>首页</li>
                </a>
                <a href="#recommend">
                    <li>项目</li>
                </a>
                <a href="#foot">
                    <li>联系我</li>
                </a>
            </ul>
            <div id="hamburger" class="close">
                <div class="nav up"></div>
                <div class="nav middle"></div>
                <div class="nav down"></div>
            </div>
        </nav>
        <!-- banner -->
        <div id="banner">
            <div class="inner">
                <h1>Andy1999</h1>
                <p>一个热爱互联网的高中生</p>
            </div>
            <a>
                <button id="more"><span>MORE</span></button>
            </a>
        </div>
    </header>
    <!-- recommend -->
    <section id="recommend">
        <div class="wrapper">
            <h1>About me</h1>
            <div class="hr"></div>
            <p>上海市徐汇中学高二学生，对Linux运维比较擅长。 </p>
        </div>
        <div class="icon-group">
            <a href="https://github.com/kenziD/Resume"><img class="icon icon1" src="img/github2.png"> <span class="icon-name">GITHUB</span></a>
            <a href="http://kenzid.github.io"><img src="img/logo.png" class="icon icon2"> <span class="icon-name">BLOG</span></a>
            <a href="http://twitter.com"><img src="img/twitter.png" class="icon icon3"> <span class="icon-name">TWITTER</span></a>
        </div>
    </section>
    <!-- skill -->
    <section id="skill">
        <h1 class="heading">Skill</h1>
        <div class="hr"></div>
        <div class="card-group">
            <div class="card">
                <span class="language">PHP</span>
                <div class="circle mask"></div>
                <div class="circle left5"></div>
                <div class="circle right"></div>
            </div>
            <div class="card">
                <span class="language">CSS</span>
                <div class="circle mask"></div>
                <div class="circle left2"></div>
                <div class="circle right"></div>
            </div>
            <div class="card">
                <span class="language">HTML</span>
                <div class="circle mask"></div>
                <div class="circle left2"></div>
                <div class="circle right"></div>
            </div>
            <div class="card">
                <span class="language">JavaScript</span>
                <div class="circle mask"></div>
                <div class="circle left4"></div>
                <div class="circle right"></div>
            </div>
            <div class="card">
                <span class="language">Python</span>
                <div class="circle mask"></div>
                <div class="circle left3"></div>
                <div class="circle right"></div>
            </div>
            <div class="card">
                <span class="language">NodeJS</span>
                <div class="circle mask"></div>
                <div class="circle left6"></div>
                <div class="circle right"></div>
            </div>
        </div>
    </section>
    <!-- pro-show -->
    <section id="pro-show">
        <div class="show-preview">
            <div class="img-section">
                <img src="img/project.jpg" alt="">
            </div>
            <div class="text-section">
                <h2>MoeClub</h2>
                <p>萌え MoeClub，一个交流各项技术/娱乐知识的论坛，目前日均活跃人数大约100人。</p>
            </div>
        </div>
        <div class="show-preview">
            <div class="img-section">
                <a href="#"><img src="img/micro.png" alt=""></a>
            </div>
            <div class="text-section">
                <h2>Andy1999的个人博客</h2>
                <p>我自己的个人博客，分享一些最新的好玩的小玩意。</p>
            </div>
        </div>
        <div class="show-preview">
            <div class="img-section">
                <img src="img/control.jpg" alt="">
            </div>
            <div class="text-section">
                <h2>MoeFQ Image Hosting</h2>
                <p>利用Chevereto为基础做的一款图床程序，进行了大量的优化已经可以满足正常使用。</p>
            </div>
        </div>
    </section>
    <!-- footer -->
    <footer id="foot">
        <div class="share-group">
            <a href="https://github.com/Xuchenhao"><i class="logo fa fa-github-alt"></i></a>
            <a href="http://weibo.com/andyxu1999"><i class="logo fa fa-weibo"></i></a>
            <a href="http://twitter.com/mjcxx123"><i class="logo fa fa-twitter"></i></a>
            <a><i class="logo fa fa-weixin"></i></a>
        </div>
        <div class="copy">
            &copy kenziD
        </div>
    </footer>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- sweet-alert -->
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<!-- loading....... -->
<script type="text/javascript">
// $(window).load(function() {
//     setTimeout(function() {
//         $(".se-pre-con").fadeOut("slow");;
//     });
// });
</script>
<script type="text/javascript" src="js/myJS.js"></script>

</html>
